<template>
  <el-dialog
    :visible.sync="visible"
    title="添加"
    :close-on-click-modal="false"
    @close="colseDialog"
  >
    <el-form
      ref="dataForm"
      :rules="rules"
      :model="dataForm"
      label-position="right"
      label-width="80px"
      style="width: 500px; margin-left: 50px"
    >
      <el-form-item label="策略名称" prop="strategyName">
        <el-input
          v-model="dataForm.strategyName"
          placeholder="请输入策略名称"
          style="width: 360px"
        />
      </el-form-item>
      <el-form-item label="所属投顾" prop="investName">
        <el-input
          v-model="dataForm.investName"
          placeholder="请选择投顾"
          readonly
          style="width: 360px"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="selectHandle"
          ></el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="投资风格" prop="styleList">
        <el-select
          v-model="dataForm.styleList"
          clearable
          placeholder="请输入投资风格"
          style="width: 360px"
        >
          <el-option
            :label="item.styleName"
            :value="item.styleId"
            v-for="item in dict.style"
            :key="item.styleId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="投资市场" prop="marketList">
        <el-select
          v-model="dataForm.marketList"
          clearable
          multiple
          placeholder="请输入投资市场"
          style="width: 360px"
        >
          <el-option
            :label="item.strategyMarket"
            :value="item.id"
            v-for="item in dict.market"
            :key="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="投资方法" prop="methodList">
        <el-select
          v-model="dataForm.methodList"
          clearable
          multiple
          placeholder="请输入投资方法"
          style="width: 360px"
        >
          <el-option
            :label="item.strategyMethod"
            :value="item.methodId"
            v-for="item in dict.method"
            :key="item.methodId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="投资标的" prop="subjectList">
        <el-select
          v-model="dataForm.subjectList"
          clearable
          multiple
          placeholder="请输入投资标的"
          style="width: 360px"
        >
          <el-option
            :label="item.strategySubject"
            :value="item.id"
            v-for="item in dict.subject"
            :key="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="对标指数" prop="investIndex">
        <indexSelectTree
          :multiple="true"
          :width="360"
          v-model="dataForm.investIndex"
          @contrastOptionsObj="contrastOptionsObjHandle"
        ></indexSelectTree>
      </el-form-item>
      <el-form-item label="净值类型" prop="strategyNetWorthStyle">
        <el-radio v-model="dataForm.strategyNetWorthStyle" :label="0"
          >单利</el-radio
        >
        <el-radio v-model="dataForm.strategyNetWorthStyle" :label="1"
          >复利</el-radio
        >
        <div>
          <p
            style="
              margin-left: -65px;
              font-size: 11px;
              color: #999;
              line-height: 22px;
            "
          >
            *单利：(当日净值-前一日净值)/基准日净值
          </p>
          <p
            style="
              margin-left: -65px;
              font-size: 11px;
              color: #999;
              line-height: 22px;
            "
          >
            *复利：(当日净值-前一日净值)/前一日净值
          </p>
        </div>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="colseDialog()">取消</el-button>
      <el-button type="primary" @click="addSubmit()">提交</el-button>
    </div>

    <investManageOpen
      v-if="selectVisible"
      ref="investManageOpen"
      @selctInvestManage="selctInvestManage"
    ></investManageOpen>
  </el-dialog>
</template>

<script>
import investManageOpen from "@/views/afterManage/afterInvest/investManageOpen.vue";
import { strategyType } from "@/api/policyManage";
import indexSelectTree from "@/components/investComn/indexSelectTree.vue";
import { mapGetters } from "vuex";
import {
  addOrUpdateStrategyInfo,
  findStrategyExtraInfoById,
} from "@/api/policyManage";

export default {
  components: { investManageOpen, indexSelectTree },
  props: {
    addPolicyManageVisible: {
      type: Boolean,
    },
  },
  data() {
    return {
      visible: false,
      selectVisible: false,
      dict: [],
      contrastOptionsObj: {},
      dataForm: {
        strategyId: "",
        strategyName: "",
        investName: "",
        makeTime: undefined,
        investIndex: "",
        strategyBenchmarkingIndex: "",
        styleList: "",
        marketList: [],
        methodList: [],
        subjectList: [],
        strategyNetWorthStyle: 0,
      },
      rules: {
        strategyName: [
          { required: true, message: "策略名称必填", trigger: "blur" },
        ],
        investName: [
          { required: true, message: "所属投顾必填", trigger: "change" },
        ],
        makeTime: [
          { required: true, message: "成立时间必填", trigger: "change" },
        ],
        styleList: [
          { required: true, message: "投资风格必填", trigger: "change" },
        ],
        marketList: [
          { required: true, message: "投资市场必填", trigger: "change" },
        ],
        methodList: [
          { required: true, message: "投资方法必填", trigger: "change" },
        ],
        subjectList: [
          { required: true, message: "投资标的必填", trigger: "change" },
        ],
      },
    };
  },
  watch: {
    "dataForm.investIndex": {
      handler(newList, oldList) {
        if (newList.length > 5) {
          this.$message({
            message: "最多选择5个对比指标",
            type: "warning",
            duration: 2000,
          });
          this.$nextTick(() => {
            this.dataForm.investIndex = oldList;
          });
        }
      },
    },
    addPolicyManageVisible: {
      handler(val) {
        this.visible = val;
        if (val) {
          this.$nextTick(() => {
            this.$refs["dataForm"].resetFields();
          });
        }
      },
      deep: true,
    },
  },
  computed: {
    ...mapGetters(["userId"]),
  },
  mounted() {
    this.getStrategyType();
  },
  methods: {
    getStrategyType() {
      strategyType().then((res) => {
        this.dict = res.body;
      });
    },
    init(strategyId, dict, userId, investName) {
      this.dict = dict;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        (this.dataForm = {
          strategyId: "",
          strategyName: "",
          investName: "",
          makeTime: undefined,
          investIndex: "",
          strategyBenchmarkingIndex: "",
          styleList: "",
          marketList: [],
          methodList: [],
          subjectList: [],
          strategyNetWorthStyle: 0,
        }),
          (this.dataForm.createdBy = userId);
        if (investName) this.dataForm.investName = investName;
        if (strategyId) this.findStrategyExtraInfoById(strategyId);
      });
    },
    findStrategyExtraInfoById(strategyId) {
      findStrategyExtraInfoById(strategyId).then((res) => {
        const row = res.body[0];
        this.dataForm.strategyId = row.strategyInfoVo.strategyId;
        this.dataForm.strategyName = row.strategyInfoVo.strategyName;
        this.dataForm.investName = row.strategyInfoVo.investName;
        this.dataForm.makeTime = row.strategyInfoVo.makeTime;
        this.dataForm.investIndex = row.strategyInfoVo.investIndex;
        this.dataForm.styleList = row.strategyInfoVo.styleIdList;
        this.dataForm.marketList = row.strategyInfoVo.marketIdList;
        this.dataForm.methodList = row.strategyInfoVo.methodIdList;
        this.dataForm.subjectList = row.strategyInfoVo.subjectIdList;
        this.dataForm.strategyNetWorthStyle =
          row.strategyInfoVo.strategyNetWorthStyle;
      });
    },
    contrastOptionsObjHandle(obj) {
      this.contrastOptionsObj = obj;
    },
    selectHandle() {
      this.selectVisible = true;
      this.$nextTick(() => {
        this.$refs.investManageOpen.init();
      });
    },
    selctInvestManage(investName) {
      this.dataForm.investName = investName;
    },
    addSubmit() {
      if (this.dataForm.investIndex.length) {
        const index_list = this.dataForm.investIndex.map(
          (item) => this.contrastOptionsObj[item]
        );
        this.dataForm.strategyBenchmarkingIndex = index_list.join(",");
      }
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          addOrUpdateStrategyInfo({
            ...this.dataForm,
          }).then((res) => {
            this.$notify({
              type: "success",
              message: res.msg,
              duration: 2000,
            });
            this.$emit("update:addPolicyManageVisible", false);
            this.$router.push("policyManage");
          });
        }
      });
    },
    colseDialog() {
      this.$emit("update:addPolicyManageVisible", false);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
